<template>
    <div class="fillcontain">
        <div class="">
            <el-form :model="formData" inline="true" ref="formData"
            >
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="">
                            <el-select class="input-buttion" size="mini" v-bind:style="commonstyle"
                                       v-model="formData.usertype"
                                       placeholder="客户类型">
                                <el-option
                                    v-for="item in usertypeList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <el-form-item label="">
                            <el-input
                                class="input-buttion" v-bind:style="commonstyle"
                                size="mini"
                                placeholder="姓名"
                                prefix-icon="el-icon-search"
                                v-model="formData.truename">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="">
                            <el-date-picker class="input-buttion" v-bind:style="commonstyle" size="mini" style="width: 220px"
                                            v-model="formData.begintime"
                                            align="right"
                                            type="date"
                                            value-format="timestamp"
                                            placeholder="开始时间"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="">
                            <el-date-picker class="input-buttion" v-bind:style="commonstyle" size="mini" style="width: 220px"
                                            v-model="formData.endtime"
                                            align="right"
                                            type="date"
                                            value-format="timestamp"
                                            placeholder="开始时间"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>

                </el-row>
            </el-form>
            <el-button type="primary" style="margin-left: 20px" size="mini" @click="initData" icon="el-icon-search">搜索
            </el-button>
        </div>

        <div class="table_container">
            <el-table
                v-loading="loading"
                :data="tableData"
                highlight-current-row
                style="width: 100%">
                <el-table-column
                    property="orderid"
                    label="订单id"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="truename"
                    label="客户姓名"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="vipname"
                    label="归属会员"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="createtime"
                    label="消费日期"
                    :formatter="dateFormat"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="product"
                    label="购买产品"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="pnum"
                    label="购买数量"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="srctypedesc"
                    label="积分类型"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="mscore"
                    label="新增积分"
                    min-width="10%">
                </el-table-column>
                <el-table-column
                    property="tscore"
                    label="会员新增积分"
                    min-width="10%">
                </el-table-column>

            </el-table>
            <div class="Pagination" style="text-align: left;margin-top: 10px;">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="this.formData.pageno"
                    :page-size="10"
                    layout="total, prev, pager, next"
                    :total="count">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapActions, mapState, mapGetters} from 'vuex'
    import headTop from '../components/headTop'
    import {queryscorelog} from '@/api/getData'
    import * as moment from 'moment'

    export default {
        data() {
            return {
                loading:false,
                commonstyle: {
                    'font-size': '12px',
                    'width': '200px',

                },
                formData: {
                    usertype:'',
                    truename:'',
                    begintime:'',
                    endtime:'',
                    pageno: 1,
                    pagesize: 10,

                },
                tableData: [],
                count: 0,
            }
        },
        components: {
            headTop,
        },
        created() {
            this.initData();
        },
        mounted() {
        },

        computed: {
            ...
                mapGetters(['usertypeList'])
        },
        methods: {
            dateFormat: function (row, column) {
                var date = row[column.property];
                if (date == undefined) {
                    return "";
                }
                return moment(date).format("YYYY-MM-DD");
            },
            async initData() {
                this.loading=true;
                 const v = await queryscorelog({
                     "data": this.formData
                 });
                 this.loading=false;
                 this.tableData = [];
                 var list = v.data.values;

                 this.count = v.data.totalCount;

                 list.forEach(item => {
                     const coldata = {};
                     coldata.truename = item.truename;
                     coldata.vipname = item.vipname;
                     coldata.createtime = item.createtime;
                     coldata.product = item.product;
                     coldata.orderid=item.orderid;
                     coldata.pnum=item.pnum;
                     coldata.mscore=item.mscore;
                     coldata.tscore=item.tscore;
                     coldata.srctype=item.srctype;
                     coldata.srctypedesc=item.srctypedesc;
                     coldata.comments = item.comments;
                     this.tableData.push(coldata);
                 })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.formData.pageno = val;
                this.initData();
            },



        },
    }
</script>

<style lang="less">
    @import '../style/mixin';

    .table_container {
        padding: 20px;
    }

    .input-buttion {
        font-size: 15px;
    }
</style>
